<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 表格高亮 -->
		<style type="text/css">
			tr td,
			tr th {

				width: 200px;
				line-height: 30px;
				text-align: center;
			}
		</style>


		<!--css-->
		<!-- 表格 -->
		<style type="text/css">
			header {
				border: 1px solid #eaeaea;

			}

			aside,
			main,
			footer {
				border: 1px solid #eaeaea;
			}

			table tr th {
				background: #f7f7f7;
			}

			table,
			table tr th,
			table tr td {
				border: 1px solid #eaeaea;
			}

			table {
				min-width: 200px;
				min-height: 25px;
				line-height: 25px;
				text-align: center;
				border-collapse: collapse;
			}
		</style>
	</head>
	<body>
		<div id="book">
			<base-layout>
				<template v-slot:header>
					<h1>{{ message }}</h1>
				</template>

				<template v-slot:aside>
					<h1>侧边栏</h1>
					
					<button @click="user">用户</button>
					<br />
					<button @click="goods">商品</button>
						
					
				</template>


				<template v-slot:main>
					<keep-alive>
					<component :is="curCom"></component>
					</keep-alive>
				</template>

				<template v-slot:footer>
					<p>底部</p>
				</template>
			</base-layout>
		</div>
		<!-- js最后引入-->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue-router.js"></script>
		<script type="text/javascript">
			//动态组件方法实现分栏
			let User = {
				template: `
				<div>
				<input type="Text">
				</div>
				`
			}
			let Goods = {
				data: function() {
					return {
						message: book.message,
						tableTh: book.tableTh,
						bookList: book.bookList
					}
				},
				template: `
				<div id="book">
					{{ message }}
					<table>
						<tr>
							<th v-for="th in tableTh">
								{{th.title}}
							</th>
						</tr>
						<tbody id="body">
							<tr v-for="(tr,index) in bookList" :key="tr.id" v-on:click="select(index)">
								<td><input type="radio" :checked="tr.isChecked"></td>
								<td>{{tr.id}}</td>
								<td>{{tr.name}}</td>
								<td>{{tr.date}}</td>
								<td>{{formatprice(tr.price)}}</td>
								<td>
									<button-reduce :list="tr" :index="index"></button-reduce> {{tr.num}}
									<button-add :list="tr"></button-add>
								</td>
								<td>
									<button-remove :index="index"></button-remove>
								</td>
							</tr>
						</tbody>
				
				
					</table>
					<h3>总价格： {{formatprice(totalSumAll)}}</h3>
				</div>
				`,
				computed: {
					// 计算总价格,方法1
					totalSumAll() {
						let totalSumAll = 0;
						this.bookList.forEach((item) => {
							totalSumAll += item.price * item.num
						});
						return totalSumAll
					},
					// 计算总价格,方法2
					totalSumAll2() {
						return this.bookList.reduce((returnVal, nextItem) => returnVal + nextItem.price * nextItem.num, 0);
					},
					// 给价格增加两个小数点,方法1
					formatprice: function() {
						return function(price) {
							return "¥" + price.toFixed(2);
						}
					},
				},
				methods: {
					select: function(index) {
						console.log("index:" + index);
						if (this.bookList[index] != null) {
							if (this.bookList[index].isChecked)
								return this.bookList[index].isChecked = false;
							return this.bookList[index].isChecked = true;
						}
				
					}
				
				},

				components: {
					'button-remove': {
						props: ['index'],
						template: `
							<button v-on:click="remove(index)" >移除</button>
							`,
						methods: {
							remove: function(index) {
								console.log("index:::" + index);
								this.$root.bookList.splice(index, 1);
							}

						},
					},
					'button-reduce': {
						props: ['list', 'index'],
						template: `
							<button v-on:click="reduce(list,index)" :disabled="list.num <1">-</button>
							`,
						methods: {
							reduce: function(item, index) {
								console.log(item, index);
								item.num--;
								if (item.num == 0) {
									this.$root.bookList.splice(index, 1);
								}
							}
						},
					},
					'button-add': {
						props: ['list'],
						template: `
							<button v-on:click="add(list)">+</button>
							`,
						methods: {
							add: function(item) {
								console.log(item);
								item.num++;
							},
						},
					}
				},
				mounted: function() {
					var tbody = document.getElementById('body'); //tbody节点
					for (var i = 0; i < tbody.children.length; i++) {
						tbody.children[i].style.backgroundColor = '#ffffff';
						//实现鼠标移入高亮
						tbody.children[i].onmouseenter = function() {
							this.style.backgroundColor = '#f7f7f7';

						}
						tbody.children[i].onmouseleave = function() {
							this.style.backgroundColor = '#ffffff';
						}
					}
				}

			}
			let baseLayout = {
				template: `
					<div class="container">
					  <header>
					    <slot name="header"></slot>
					  </header>
					 
					  <main>
					  <aside width="200px" style="height:500px;width:100px;float:left;">
					    <slot name="aside"></slot>
					  </aside>
					    <slot name="main"></slot>
					  </main>
					  <footer style="position:fixed; bottom:0;" >
					    <slot name="footer"></slot>
					  </footer>
					</div>
					`
			}
			let book = new Vue({
				el: '#book',
				data: {
					message: '书籍',
					num1: 1,
					curCom: 'user',
					orderBy: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"], //可以控制字段的先后顺序，想调整列的先后顺序，改这个数组就行，可以做个性化设置
					tableTh: { //表头的描述信息
						t1: {
							title: "", //还可以增加其他描述，比如width等
							align: "left"
						},
						t2: {
							title: "ID", //还可以增加其他描述，比如width等
							align: "right"
						},
						t3: {
							title: "书籍名称",
							align: "right"
						},
						t4: {
							title: "出版日期",
							align: "right"
						},
						t5: {
							title: "价格",
							align: "right"
						},
						t6: {
							title: "购买数量",
							align: "right"
						},
						t7: {
							title: "操作",
							align: "right"
						}
					},

					bookList: [{
							isChecked: false,
							id: 1,
							date: '2010-10',
							price: 98,
							num: 1,
							name: 'JAVA',
						},
						{
							isChecked: false,
							id: 2,
							date: '2011-10',
							price: 100,
							num: 1,
							name: 'PYTHON',
						},
						{
							isChecked: false,
							id: 3,
							date: '2012-10',
							price: 111,
							num: 1,
							name: 'PHP',
						},
						{
							isChecked: false,
							id: 4,
							date: '2013-10',
							price: 222,
							num: 1,
							name: '什么',
						}
					],
				},
				components: {
					'base-layout': baseLayout,
					'user': User,
					'goods': Goods,
				},
				methods:{
					user:function(){
						this.curCom='user'
					},
					goods:function(){
						this.curCom='goods'
					},
				}

			})


			// 给价格增加两个小数点,方法2，简写
			// formatprice:function(){
			// 	return price=>"¥"+price.toFixed(2);
			// },



			// 给价格增加两个小数点,方法3，过滤,注意filters与computed同级
			// filters: {
			//   formatprice:price=>"¥"+price.toFixed(2)
			// }
		</script>
		<!-- 高亮js -->
		<script type="text/javascript">

		</script>
	</body>
</html>
